<script setup lang="ts">
import { onMounted, ref, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'

const chartProClassDom = ref<HTMLElement | null>(null)
let myChart: echarts.ECharts | null = null

onMounted(() => {
  if (chartProClassDom.value) {
    myChart = echarts.init(chartProClassDom.value)
    myChart.setOption({
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
        },
      ],
    })
  }
})
// 在组件卸载时清理图表实例，防止内存泄漏
onBeforeUnmount(() => {
  if (myChart) {
    myChart.dispose()
    myChart = null
  }
})
</script>

<template>
  <div class="echart" ref="chartProClassDom"></div>
</template>

<style scoped lang="scss">
.echart {
  height: 380px;
  margin: 15px 0;
  overflow: hidden;
}
</style>
